<template>
  <div>
      <ul>
          <li>
              <div class="list" >
                  <div class="lef">
                      <span>1条评论</span>
                  </div>
                  <div class="goods">
                      <img src="http://mp6.jmstatic.com/product/005/291/5291114_std/5291114_1000_1000.jpg?v=1623037731&imageView2/2/w/440/q/90" alt="">
                  </div>
                  <div class="goods-middle">
                      <span>[2人团]</span>
                      【手机专享】日本Kiss Me奇士美眼线笔0.4g睫毛膏6g
                  </div>
                  <div class="goods-foot">
                       <div class="goods-lef">
                           <span class="price">￥50</span>
                           <span class="price-dm">单买价￥128</span>
                       </div>
                       <div class="goods-rig">去开团</div>
                  </div>
              </div>
          </li>
          <li>
              <div class="list">
                  <div class="lef">
                      <span>1条评论</span>
                  </div>
                  <div class="goods">
                      <img src="http://mp6.jmstatic.com/product/005/291/5291114_std/5291114_1000_1000.jpg?v=1623037731&imageView2/2/w/440/q/90" alt="">
                  </div>
                  <div class="goods-middle">
                      <span>[2人团]</span>
                      【手机专享】日本Kiss Me奇士美眼线笔0.4g睫毛膏6g
                  </div>
                  <div class="goods-foot">
                       <div class="goods-lef">
                           <span class="price">￥50</span>
                           <span class="price-dm">单买价￥128</span>
                       </div>
                       <div class="goods-rig">
                      去开团
                  </div>
                  </div>
              </div>
          </li>
          <li>
              <div class="list">
                  <div class="lef">
                      <span>1条评论</span>
                  </div>
                  <div class="goods">
                      <img src="http://mp6.jmstatic.com/product/005/291/5291114_std/5291114_1000_1000.jpg?v=1623037731&imageView2/2/w/440/q/90" alt="">
                  </div>
                  <div class="goods-middle">
                      <span>[2人团]</span>
                      【手机专享】日本Kiss Me奇士美眼线笔0.4g睫毛膏6g
                  </div>
                  <div class="goods-foot">
                       <div class="goods-lef">
                           <span class="price">￥50</span>
                           <span class="price-dm">单买价￥128</span>
                       </div>
                       <div class="goods-rig">
                      去开团
                  </div>
                  </div>
              </div>
          </li>
          <div class="tips">
              已到当前页面最底部，看看其他页面吧~
          </div>
      </ul>
      <div class="xia">
          <img src="http://f0.jmstatic.com/btstatic/h5/index/go_top.png" alt="">
      </div>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
html{
    background-color: #f5f5f5;
}
.list{
    width: 100%;
    height: 260px;
    position: relative;
    background-color: #fff;
    margin-bottom: 8px;
}
.list > .lef{
    border: .0625rem solid #eee;
    position:absolute ;
    top: 5.875rem;
    left: 0px;
    border-top-right-radius: 1.5625rem;
    border-bottom-right-radius: 1.5625rem;
    background: rgba(251,251,251,.8);
    font-size: 11px;
    color: #666;
    padding: 4px 7px;
}
.goods{
    width: 100%;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.goods > img{
    width: 150px;
    height: 150px;
}
.goods-middle{
    font-size: 14px;
    max-height: 34px;
    line-height: 18px;
    padding: 0 12px;
    margin-top: 10px;
    color: #424242;
}
.goods-middle > span{
    color: #fe4070;
    display: inline-block;
    margin-left: 2px;
}
.goods-foot{
    display: flex;
    padding: 12px;
    width: 100%;
    box-sizing: border-box;
}
.goods-lef{
    flex:1;
    height: 40px;
    line-height: 1.2;
}
.goods-lef > span{
    color: #999;
    display: block;
}
.goods-lef > .price{
    color: #fe4070;
}
.goods-lef > .price-dm{
    font-size: 11px;
}
.goods-rig{
    width: 90px;
    height: 26px;
    border: .0625rem solid #fe4070;
    background: #fe4070;
    border-radius: 25px;
    text-align: center;
    line-height: 26px;
    box-sizing: border-box;
    color: #fff;
}
.tips{
    font-size: 14px;
    margin-bottom: 8px;
    line-height: 20px;
    width: 100%;
    color: #999;
    text-align: center;
}
.xia{
    width: 42px;
    height: 42px;
    position: fixed;
    right: .75rem;
    bottom: 3.75rem;
}
.xia > img{
    width: 42px;
    height: 42px;
}
</style>